<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FDTree Test</title>
<!-- css -->
<link id="fd_theme" href="../../styles/theme/aristo/theme.css" rel="stylesheet" type="text/css" />
<link href="../../styles/primeui-1.1-min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body{font-size: 12px}
</style>
<!-- lib -->
<script type="text/javascript" src="../../src/FDLib/FDLib.js"></script>
<script type="text/javascript" src="../../src/JsMap.js"></script>
<!-- app js -->
<script type="text/javascript" src="../theme.js"></script>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="city.js"></script>
</head>
<body>

<div id="menu" style="border: solid 1px #ccc;width:500px;"></div>
<div id="menu2" style="border: solid 1px #ccc;width:500px;"></div>

<br>
<button onclick="hide()">隐藏</button>
<button onclick="show()">显示</button>
<button onclick="expandAll()">展开全部</button>
<button onclick="collapseAll()">收缩全部</button>
<button onclick="clickNodePHP()">选择PHP</button>
<button onclick="clickNodeJavaOpen()">选择Java开源</button><br>
<button onclick="check()">勾选MSSQLSERVER,Oracle,MYSQL</button>
<button onclick="uncheck()">取消勾选MSSQLSERVER,Oracle,MYSQL</button>
<button onclick="checkAll()">全选</button>
<button onclick="checkOthers()">反选</button>
<button onclick="uncheckAll()">全不选</button><br>
<button onclick="getChecked()">获取选中的值</button>
<button onclick="setData()">改变数据</button>




<br>
<button onclick="clearLog()">清除日志</button>
<br>

<div id="d" style="font-size: 12;height: 300px;overflow: auto;border: solid 1px #777;"></div>

<script type="text/javascript">
FDLib.setDir('../../src/');
var tree;
var tree2;

function log(txt) {
	document.getElementById('d').innerHTML += txt + "<br>"
}
function clearLog() {
	document.getElementById('d').innerHTML = '';
}

FDLib.loadJs('FDTree',function() {
	tree = new FDTree({
		domId:'menu'
		,data:rows
		,onclick:function(node) {
			if(node.url) {
				log('打开' + node.url)
			}
		}
	});
	tree2 = new FDTree({
		domId:'menu2'
		,data:rows
		,checkable:true
		,clickToggle:true
		,onCheck:function(node,isCheck){
			if(isCheck) {
				log(node.text + " 被选中")
			}else{
				log(node.text + " 被取消")
			}
		}
		,highlightHandler:function(node){
			if(node.url){
				return true;
			}
			if(node.children && node.children.length > 0){
				return false;
			}
			return true;
		}
		,onclick:function(node) {
			if(node.url) {
				log('打开' + node.url)
			}
		}
	});
});

function hide() {
	tree.hide();
}
function show() {
	tree.show();
}
function collapseAll() {
	tree.collapseAll(function(nodeObj){
		log('节点:[' + nodeObj.text + '] 被收缩')
	})
}
function expandAll() {
	tree.expandAll(function(nodeObj){
		log('节点:[' + nodeObj.text + '] 被展开')
	})
}
function clickNodePHP() {
	tree2.select('php');
}
function clickNodeJavaOpen() {
	tree2.select('javaopen');
}
function check() {
	tree2.check(['mssqlserver','oracle','mysql'],function(nodeObj,checkbox){
		log('节点:[' + nodeObj.text + '] 被选中')
	});
}
function uncheck() {
	tree2.uncheck(['mssqlserver','oracle','mysql'],function(nodeObj,checkbox){
		log('节点:[' + nodeObj.text + '] 被取消');
	});
}
function checkAll() {
	tree2.checkAll(function(nodeObj,checkbox){
		log('节点:[' + nodeObj.text + '] 在全选行列中');
	});
}
function uncheckAll() {
	tree2.uncheckAll(function(nodeObj,checkbox){
		log('节点:[' + nodeObj.text + '] 在全不选行列中');
	});
}
function checkOthers() {
	tree2.checkOthers(function(nodeObj,checkbox){
		var lastChecked = !checkbox.checked;
		var state = lastChecked ? '选中状态' : '未选中状态'
		document.getElementById('d').innerHTML += '节点:[' + nodeObj.text + "] 上一次为:"+state+"<br>"
		log('节点:[' + nodeObj.text + '] 上一次为:'+state);
	});
}
function getChecked() {
	var val = tree2.getChecked();
	var s = "value:"
	FDLib.util.each(val,function(v){
		s += ' ' + v.id;
	})
	
	log(s);
}
function setData() {
	tree2.setData(rows2);
}
</script>
</body>
</html>